<!DOCTYPE html>
<html  >
	<head>
		<meta charset="utf-8">
		<title>鑫多多</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<style type="text/css">
			[ng-cloak]{display:none;}
		</style>
		<style>
		 	.mui-content-padded {
				padding: 10px;
			}
			body,body .mui-content {
				background-color: #fff !important;
			}
			code {
				word-wrap: break-word;
				word-break: normal;
				font-size: 90%;
				color: #c7254e;
				background-color: #f9f2f4;
				border-radius: 4px;
			}
		</style>
		<!--common---start-->
		<script src="../js/angular/angular.min.js"></script>
		<script src="../js/angular/angular-resource.js"></script>
		<script src="../js/angular/common.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/common.js"></script>
		<!--common---end-->
		<script src="../js/service/oldGoodsService.js"></script>
		<script src="../js/mui.pullToRefresh.js"></script>
		<script src="../js/mui.pullToRefresh.material.js"></script>
		<link rel="stylesheet" href="../css/up_lod.css.css">
	</head>
	<body ng-app="mainApp" ng-controller="oldGoodsCtrl" >
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">旧物回收</h1>
		</header>
		<div class="mui-content">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll" style="padding-top: 10px;">
						<label>您好，一下为旧物回收成功案例展示，仅供参考。</label>
					</div>
				</div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell" ng-repeat="goods in goodsList"  ng-click="oldGoodsDetail(goods)">
										<img ng-if="goods.ifPic" style="width: 80px;height: 60px;"  src="{{baseUrl+'/dapi/download/getImageIO?imgUrl='+goods.iconUrl|getImgUrl}}" ></img>
										<img ng-if="!goods.ifPic" style="width: 80px;height: 60px;" ng-src="../images/goodsDefault.gif"></img>
										{{goods.title}}<br />
										价格￥{{goods.price}}&nbsp;&nbsp;&nbsp;&nbsp;重量：{{goods.perWeight}}
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script>	
			mui.init();
			mainApp.controller('oldGoodsCtrl', function($scope, $http,oldGoodsService) {
				$scope.oldGoodsDetail=function(goods){
					mui.openWindow({
						url:"oldGoodsDetails.html",
						id:'oldGoodsDetails.html',
					    extras:{
					        goods:goods
					    },
					    styles: {
							popGesture:"close"	
						}
					});
				}
				$scope.pageIndex=1;
				$scope.pageSie=20;
				$scope.param={"dealStatus":'1'};//旧物交易完成
				$scope.baseUrl=baseUrl;
				(function($) {
				//阻尼系数
					var deceleration = mui.os.ios?0.003:0.0009;
					$('.mui-scroll-wrapper').scroll({
						bounce: false,
						indicators: true, //是否显示滚动条
						deceleration:deceleration
					});
					$.ready(function() {
						
						//循环初始化所有下拉刷新，上拉加载。
						$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
							$(pullRefreshEl).pullToRefresh({
								down: {
									callback: function() {
										var self = this;
										setTimeout(function() {
											var ul = self.element.querySelector('.mui-table-view');
											$scope.pageIndex=$scope.pageIndex+1;
											//ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild);
											getList($scope.pageIndex,$scope.pageSie,$scope.param);
											self.endPullDownToRefresh();
										}, 1000);
									}
								},
								up: {
									callback: function() {
										var self = this;
										setTimeout(function() {
											$scope.pageIndex=$scope.pageIndex+1;
											var ul = self.element.querySelector('.mui-table-view');
											//ul.appendChild(createFragment(ul, index, $scope.pageSie));
											getList($scope.pageIndex,$scope.pageSie,$scope.param);
											self.endPullUpToRefresh();
										}, 1000);
									}
								}
							});
						});
						var createFragment = function(ul, index, count, reverse) {
							var length = ul.querySelectorAll('li').length;
							var fragment = document.createDocumentFragment();
							var li;
							for (var i = 0; i < count; i++) {
								li = document.createElement('li');
								li.className = 'mui-table-view-cell';
								li.innerHTML = '第' + (index + 1) + '个选项卡子项-' + (length + (reverse ? (count - i) : (i + 1)));
								fragment.appendChild(li);
							}
							return fragment;
						};
					});
				})(mui);
				
				
				$scope.goodsList;
				var success=function(data){
					if($scope.pageIndex==1){
						$scope.goodsList=data.data.list;
					}else{
						angular.forEach(data.data.list, function(goods) {
							$scope.goodsList.push(goods);
						});
					}
				}
				
				var getList=function(pageIndex,pageSize,param){
					//请求商品列表数据
					oldGoodsService.getoldGoogsList(pageIndex,pageSize,param,success,error) ;
				};
				//初始化列表数据
				getList($scope.pageIndex,$scope.pageSie,$scope.param);
				
			});
		</script>
	</body>

</html>
